<template>
  <div class="waybill_drawer">
    <!-- 导入模板的 -->
    <el-drawer title="运单批量导入" :visible.sync="drawerCollectData" :direction="direction" :before-close="handleClose"
      :wrapperClosable="false" size="50%" :with-header="false">
      <div>
        <div class="header">
          <span class="order-title">温度异常导入</span>
          <div class="order-right">
            <span class="order-close">
              <i class="el-icon-close" @click="handleClose" />
            </span>
          </div>
        </div>
        <div class="body_center">
          <div class="first_step">
            <div style="color: #378cbe">操作流程:</div>
            <div>
              <span>第一步:</span>
              <span>&nbsp;&nbsp;下载导入模板</span>
            </div>
            <div>
              <span style="color: #ff9a00">
                如需要调整模板字段,点击模板设置</span>
              <el-button type="primary" style="float: right">
                <span class="el-icon-download"></span>
                <span :href="ApiurlHtml" style="color: #ffffff" @click="reductionDown" data-tracker="P2-17">下载模板</span>
              </el-button>
            </div>
          </div>
          <div class="second_step">
            <div>第二步:</div>
            <div>
              <span style="color: #ff9a00">
                文件不超过2M,建议先上传少量数据测试导入数据的有效性
              </span>
              <div style="float:right">
                <el-upload class="upload-demo" ref="add-upload" action multiple :auto-upload="false" :limit="1"
                  :on-exceed="onexceedfunt" :file-list="business_license" :on-change="
                        (file, fileList) => {
                          handleChange(file, fileList, 29);
                        }
                      " :on-remove="
                        (file, fileList) => {
                          removeChange(file, fileList, 29);
                        }
                      ">
                  <el-button slot="trigger" type="primary" size="mini" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="third_step">
            <div>
              <span>第三步:&nbsp;&nbsp;提交导入</span>
              <el-button type="primary" icon="el-icon-thumb" style="float: right" @click="derive()">提交导入</el-button>
            </div>
          </div>
          <div class="four_step">
            <div>
              导入结果:&nbsp;&nbsp;
              <div v-for="(o, index) in toLead_result" :key="index" class="text item"
                style="color: red;line-height: 20px;">
                {{ index + 1 }}.{{ o }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  import { thermometermonitorabnormalimport } from "@/api/Largewidthmeterlist";
  import { uploading } from "@/page/material/common/common";
  import { getToken } from "@/utils/auth";

  export default {
    name: "ImportCollect",
    props: ["drawerCollectData"],
    data() {
      return {
        direction: 'rtl',
        innerDrawer: false,
        url: process.env.VUE_APP_URL,
        toLead_result: "",
        ApiurlHtml: "",
        fileList: [],
        business_license: [],
        ImportDataUrl: "",
      };
    },
    computed: {
    },
    methods: {
      reductionDown() {
        var DownUrl = "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/undefined/1698914332514%E5%BC%82%E5%B8%B8%E5%A4%84%E7%90%86.xlsx"
        window.open(DownUrl)
      },
      onexceedfunt() {
        let msg = "请勿上传多个文件";
        this.ContentSuccess(msg);
      },
      handleClose() {
        this.drawerCollectData = false
        this.$emit('drawerCollectShow', false)
      },
      // 上传到oss上
      handleChange(file, fileList, type) {
        var filelist = file.raw; //文件
        var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
        uploading(filelist, filename, type).then((result) => {
          var resname = result.name;
          this.ImportDataUrl = resname;
          var resType = resname.split("/")[0];
          var filehttp = "http://oss.dushisc.com/";
          //this.ImportDataUrl = filehttp + resname
          switch (resType) {
            case "57":
              this.business_license.push({
                name: filehttp + result.name,
              });
              break;
          }
        });
      },
      // 删除调用
      removeChange(file, fileList, type) {
        switch (type) {
          case 57:
            if (this.business_license.length > 0) {
              for (var i = 0; i < this.business_license.length; i++) {
                if (this.business_license[i].uid == file.uid) {
                  this.business_license.splice(i, 1);
                }
              }
            }
            break;
        }
      },
      derive() {
        const data = {
          file_name: this.ImportDataUrl,
          header_id: "35",
        };
        thermometermonitorabnormalimport(data).then((res) => {
          if (res.code === 10000) {
            var msg = res.data.res;
            this.toLead_result = msg;
          } else {
            var msg = res.msg;
            this.ContentSuccess(msg);
          }
        });
      },
      ContentSuccess(msg) {
        this.$message({
          message: msg,
          type: "success",
        });
      },
      // 强制刷新当前页面
      locationReload() {
        location.reload();
      },
    },
  };
</script>
<style lang="less" scoped>
  /deep/.el-upload {
    display: block !important;
    text-align: right !important;
  }

  /deep/.el-drawer__header {
    margin-bottom: 0px !important;
    background: #eee !important;
    border-bottom: 1px solid #ccc !important;
    padding: 10px 20px 10px 20px !important;
  }

  .header {
    width: 100%;
    height: 36px;
    background: #5a6d82;
    line-height: 36px;

    .order-title {
      color: #fff;
      font-size: 14px;
      padding-left: 12px;
    }

    .order-right {
      position: absolute;
      right: 0;
      top: 0;
      height: 35px;
      line-height: 35px;

      .order-close {
        height: 35px;
        display: inline-block;
        overflow: hidden;
        position: relative;
        padding: 0 10px;
        cursor: pointer;
        color: #fff;
      }
    }
  }

  .body_center {
    width: 98%;
    height: 400px;
    margin: 10px auto;

    .first_step {
      width: 98%;
      height: 90px;
      margin: 12px auto;
      font-size: 13px;
      line-height: 27px;
      border: 1px dashed #dddddd;
      border-top: none;
      border-right: none;
      border-left: none;
    }

    .second_step {
      width: 98%;
      min-height: 62px;
      overflow: hidden;
      margin: 12px auto;
      font-size: 13px;
      line-height: 27px;
      font-size: 13px;
      line-height: 27px;
      border: 1px dashed #dddddd;
      border-top: none;
      border-right: none;
      border-left: none;
    }

    .third_step {
      width: 98%;
      height: 45px;
      margin: 12px auto;
      font-size: 13px;
      line-height: 27px;
      border: 1px dashed #dddddd;
      border-top: none;
      border-right: none;
      border-left: none;
    }

    .four_step {
      width: 98%;
      height: 45px;
      margin: 12px auto;
      font-size: 13px;
      line-height: 27px;
      border: 1px dashed #dddddd;
      border-top: none;
      border-right: none;
      border-left: none;
    }
  }
</style>